<template>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="card">
            <div class="card-header">
              <h3>插入电影数据</h3>
            </div>
            <div class="card-body">
              <!-- 插入电影数据的表单 -->
              <form @submit.prevent="insertMovieData">
                <div class="form-group">
                  <label for="code">电影代码</label>
                  <input
                    type="text"
                    class="form-control"
                    id="code"
                    v-model="formData.code"
                    placeholder="请输入电影代码"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="movie_name">电影名称</label>
                  <input
                    type="text"
                    class="form-control"
                    id="movie_name"
                    v-model="formData.movie_name"
                    placeholder="请输入电影名称"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="avg_audience_count">平均观众数</label>
                  <input
                    type="number"
                    class="form-control"
                    id="avg_audience_count"
                    v-model="formData.avg_audience_count"
                    placeholder="请输入平均观众数"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="release_time">上映时间</label>
                  <input
                    type="date"
                    class="form-control"
                    id="release_time"
                    v-model="formData.release_time"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="avg_boxoffice">平均票房</label>
                  <input
                    type="number"
                    class="form-control"
                    id="avg_boxoffice"
                    v-model="formData.avg_boxoffice"
                    placeholder="请输入平均票房"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="boxoffice">总票房</label>
                  <input
                    type="number"
                    class="form-control"
                    id="boxoffice"
                    v-model="formData.boxoffice"
                    placeholder="请输入总票房"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="rank">排名</label>
                  <input
                    type="number"
                    class="form-control"
                    id="rank"
                    v-model="formData.rank"
                    placeholder="请输入排名"
                    required
                  />
                </div>
                <button type="submit" class="btn btn-primary">插入数据</button>
              </form>
  
              <!-- 显示操作结果 -->
              <div v-if="message" class="mt-4 alert" :class="messageClass">
                {{ message }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        // 表单数据，设置默认值
        formData: {
          code: '001',
          movie_name: '电影A',
          avg_audience_count: 50, // 默认平均观众数
          release_time: '2023-01-01',
          avg_boxoffice: 50, // 默认平均票房（小于 100）
          boxoffice: 80, // 默认总票房（小于 100）
          rank: 1,
        },
        message: '', // 操作提示信息
        messageClass: '', // 提示信息的样式类
      };
    },
    methods: {
      async insertMovieData() {
        try {
          // 使用 GET 请求发送数据
          const response = await axios.get('http://127.0.0.1:8000/api/add_movie', {
            params: this.formData, // 将表单数据作为查询参数
          });
  
          // 检查 API 响应
          if (response.data.message === "插入成功") {
            this.message = response.data.message; // 显示 API 返回的消息
            this.messageClass = 'alert-success';
          } else {
            this.message = response.data.message || '数据插入失败，请稍后重试。';
            this.messageClass = 'alert-danger';
          }
        } catch (err) {
          // 捕获请求错误
          this.message = '请求失败，请检查网络连接或稍后重试。';
          this.messageClass = 'alert-danger';
        }
  
        // 3 秒后清空提示信息
        setTimeout(() => {
          this.message = '';
        }, 3000);
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    margin-top: 50px;
  }
  
  .card {
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .card-header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  }
  
  .card-body {
    padding: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .alert {
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
  }
  
  .alert-success {
    background-color: #d4edda;
    color: #155724;
  }
  
  .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
  }
  </style>